<template>
  <!--侧边栏-->
  <div style="display: flex">
    <div style="width: 200px; margin-left: -20px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
      <el-menu
          router
          v-for="(item, index) in menuList" :key="index"  style="border: none">
        <el-submenu :index="index+''" :key="index" v-if="!item.hidden">
          <template slot="title">
            <i :class="item.iconClass" style="color: #11A983"></i>
            <span style="font-weight: bold">{{item.name}}</span>
          </template>
          <el-menu-item-group v-for="(child, index) in item.children" :key="index">
              <i :class="child.iconClass"></i>
              <el-menu-item :index="child.path" style="color: #171616">{{child.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>



    <!--主体-->
    <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px;">

      <el-container>
       <el-main>
         <el-card style="margin-top: -20px">
           <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">{{item.name}}</el-breadcrumb-item>
           </el-breadcrumb>
         </el-card>
         <!--/ 内容-->
         <div class="cont" style="">
           <router-view></router-view>
         </div>
       </el-main>
      </el-container>
    </div>


  </div>

</template>

<script>
import {getToken} from "@/utils/setToken";

export default {
  name: "MyMenu",
  data() {
    return {
      // 菜单数据
      menuList: []
      }
    },
    created() {
    this.getUserType()

    },

    methods: {
      //从token中获取用户信息的类型
      getUserType() {
        let user_type = getToken("user_type")
        console.log(user_type)
        // 判断用户类型唯1，全部显示路由，否则不显示管理员权限
        if (user_type === '1'){
          console.log(this.$router.options.routes)
          this.menuList=[...this.$router.options.routes]
        }else {
          this.menuList = this.$router.options.routes.filter(item => {
            return item.name !== '管理员'
          })
        }
        return user_type
      }

  }
}


</script>

<style lang="scss">

.el-menu-item:hover{
  color: #1ab48c;
  font-size: 10px;
}
//主题不部分
.cont{
  margin-top: 20px;
}

</style>
